<script setup>

import SegTitle from "@/components/SegTitle.vue";
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import ZoomInBanner from "@/components/ZoomInBanner.vue";
import ScrollerBanner from "@/components/ScrollerBanner.vue";
import IntroSection from "@/components/IntroSection.vue";
import {cases} from "@/views/case-details/mockCase.ts";
import CasePopup from "@/views/case-details/CasePopup.vue";
import {allCases} from "@/assets/js/all-case.ts";

const state = ref({
  showAdvantage: true,
  curCase: {},
  showCasePopup: false,
})
const data = {
  number: '01',
  title: '品牌出海全案',
  eng: 'Comprehensive Brand Globalization Solution',
  desc: '旨在帮助企业顺利进入国际市场，实现品牌的全球化发展。',
  detail: '我们旨在帮助企业全面布局国际市场，从市场调研、品牌战略、产品本地化到渠道建设和数字营销，提供一站式解决方案，确保品牌在国际市场的成功运营。通过整合专业团队的资源和技术，助力品牌实现全球化发展和持续增长。',
  titles: ['品牌定位', '数字营销', '独立站搭建', '广告拍摄与制作', '品牌设计手册', '众筹项目运营', '海外户外广告', '红人推广及联盟营销']
}
const list = [
  {
    title: '全球化专业团队',
    eng: 'Global professional team',
    desc: '我们的团队由多国籍专家组成，具备跨文化工作经验和深度市场理解能力，能够为您的品牌在全球市场中提供最佳的策略和实施支持。',
    icon: '01'
  },
  {
    title: '海外营销渠道',
    eng: 'Overseas marketing channels',
    desc: '利用我们的广泛全球网络，我们能够接触到全球主要市场的核心营销渠道，确保您的品牌信息能够有效到达目标消费者。',
    icon: '02'
  },
  {
    title: '本地化内容',
    eng: 'Localized content',
    desc: '我们专注于创建与本地文化和语言完美契合的营销内容，确保您的品牌在不同市场中具有强大的吸引力和影响力。',
    icon: '03'
  },
  {
    title: '多渠道传播推广',
    eng: 'Multi-channel communication and promotion',
    desc: '通过整合社交媒体、搜索引擎、传统媒体和新兴平台，我们的多渠道传播策略确保品牌信息最大范围的覆盖和接触。',
    icon: '04'
  },
]
const randomCase = () => {
  let caseIds = allCases.filter(item => item.category === '品牌出海全案').map(item => item.caseId)
  if (caseIds.length % 2 !== 0) {
    caseIds.push(caseIds[0])
  }
  // 随机打乱顺序
  caseIds.sort(() => 0.5 - Math.random())
  return caseIds;
}
onMounted(() => {
  window.addEventListener('popstate', handlePopState);
  watch(() => state.value.showCasePopup, (newVal) => {
    document.body.style.overflow = newVal ? 'hidden' : '';
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('popstate', handlePopState);
});
const handlePopState = (event) => {
  if (state.value.showCasePopup) {
    state.value.showCasePopup = false;
    document.body.style.overflow = '';
  }
};
const showCasePopup = (caseId) => {
  state.value.curCase = cases.find(it => it.caseId === caseId);
  state.value.showCasePopup = true;
}
</script>

<template>
  <view class="seg1 container"/>
  <IntroSection class="introSection" :data="data"/>
  <SegTitle title="我们的优势" label="OUR ADVANTAGES" :enter="state.showAdvantage"/>
  <ZoomInBanner :index="0" :list="list"/>
  <SegTitle title="案例展示" label="CASE PRESENTATION" :enter="state.showAdvantage"/>
  <ScrollerBanner :randomIds="randomCase()" @onItemClick="showCasePopup"/>
  <CasePopup :show="state.showCasePopup"
             :article="state.curCase"
             @onClose="state.showCasePopup = false"/>
</template>

<style scoped>
.seg1.container {
  height: calc(100vw * 1024 / 1920);
  overflow-y: unset;
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_service1_bg.png");
}

.introSection {
  z-index: 1;
  margin-top: -27%;
}
</style>